import React from 'react'
import { connect } from 'dva'
import { Card,Radio } from 'antd'
import {timeRangeList} from '../../../utils/dataConfig'


/**
 * NetValueTrendCharts 净值走势图
 */
import {IECharts} from '../../../components'
import echarts from 'echarts'
const NetValueTrendCharts = ({ 
    data ,
    type='',
    timeRange,
     timeRangeListData,
     location
   }) => {
       let myProps
    if(data&&data.length){
        myProps = {
        option: {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.map(item=>item.date),
            axisLine: {
                lineStyle: {
                    //color: "#999"
                    color: "#4a4a4a"
                }
            },
          },
          yAxis: {
            type: 'value',
            min:function(value) {
                return Math.floor(value.min*10)/10
            },
            max:function(value) {
                return Math.ceil(value.max*10)/10
            },
            maxInterval:0.1,
            axisLine: {
                lineStyle: {
                    //color: "#999"
                    color: "#4a4a4a"
                }
            },
          },
          dataZoom: [{
            start: 30,
            end: 70,
          }],
          series: [
            {
              name: type,
              type: 'line',
              smooth: true,
              symbol: 'none',
              sampling: 'average',
              itemStyle: {
                // normal: {
                //   color: 'rgb(255, 70, 131)'
                // }
                normal: {
                //   color: 'rgb(90,184,252)'
                color: '#85aed6'
                }
              },
              areaStyle: {
                // normal: {
                //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //     offset: 0,
                //     color: 'rgb(255, 158, 68)'
                //   }, {
                //     offset: 1,
                //     color: 'rgb(255, 70, 131)'
                //   }])
                // }
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    // color: 'rgb(216,239,255)'
                    color: 'rgba(60,173,255,0.2)'
                  }, {
                    offset: 1,
                    // color: 'rgb(216,239,255)'
                    color: 'rgba(60,173,255,0.2)'
                  }])
                }
              },
              data:data.map(item=>item.value)
            }
          ]
        }
      }
    }
      return (
        <div>
            <TimeRadio value={timeRange} data={timeRangeListData} location={location} />
            {/*<div style={{ height: 320 }} >*/}
            <div style={{ height: 281 }} >
            {
                myProps&&<IECharts {...myProps} resizable={true} />
            }
            
            </div >
        </div>
        
      )
   }

/**
 * NetValueTrend 净值走势
 * 引用组件
 * NetValueTrendCharts 净值走势图
 */
import TabsMain from '../../../components/TabsMain'
import TimeRadio from '../../../components/toolbar/TimeRadio'

class NetValueTrend extends React.Component {
    state={
        data:this.props.netValueTrend
    }
    componentDidMount() {
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {
        if ((nextProps.lPortId !== this.props.lPortId) || (nextProps.cBenchCode !== this.props.cBenchCode) || (nextProps.timeRange !== this.props.timeRange)) {
            this.fetchData(nextProps)
        }
        if (nextProps.netValueTrend !== this.props.netValueTrend) {
            this.setState({
                data:nextProps.netValueTrend
            })
        }
    }
    fetchData = (props) => {
        this.props.dispatch({
            type: 'combinatorialAnalysis/getNetValueTrend',
            payload: {
                lPortId: props.lPortId,
                cBenchCode: props.cBenchCode,
                timeRange:props.timeRange
            }
        })
    }
    render() {
        const { timeRange,timeRangeArr, location } = this.props

        console.log(1222,this.props);
        
        const { unit, total }=this.state.data

        const timeRangeListData=[]

        timeRangeArr.map(item=>{
            timeRangeListData.push(timeRangeList.find(it=>it.value===item))
        })


        return (
            <Card title='净值走势'  className="netValueTrend">
            
                <TabsMain>
                    <NetValueTrendCharts title='单位净值走势图' data={unit} type="单位净值" timeRange={timeRange} timeRangeListData={timeRangeListData} location={location}/>
                    <NetValueTrendCharts title='累计净值走势图' data={total} type="累计净值" timeRange={timeRange} timeRangeListData={timeRangeListData} location={location} />
                </TabsMain>
            </Card>
        )
    }
}

NetValueTrend.defaultProps={
  lPortId:null,
  cBenchCode:null,
  timeRange:'2',
  timeRangeArr:['2','3','4','5','8','9','6','7'],
  location: {
    pathname: '/',
    query: {},
  },
  netValueTrend:{
    // "unit": [
    //     {
    //         "date": "2018-05-01", 
    //         "value": 0.9796
    //     }, 
    //     {
    //         "date": "2018-05-02", 
    //         "value": 0.9787
    //     }, 
    //     {
    //         "date": "2018-05-03", 
    //         "value": 0.9819
    //     }, 
    //     {
    //         "date": "2018-05-04", 
    //         "value": 0.9776
    //     }, 
    //     {
    //         "date": "2018-05-05", 
    //         "value": 0.9775
    //     }, 
    //     {
    //         "date": "2018-05-06", 
    //         "value": 0.9773
    //     }, 
    //     {
    //         "date": "2018-05-07", 
    //         "value": 0.9835
    //     }, 
    //     {
    //         "date": "2018-05-08", 
    //         "value": 0.9909
    //     }, 
    //     {
    //         "date": "2018-05-09", 
    //         "value": 1.0112
    //     }, 
    //     {
    //         "date": "2018-05-10", 
    //         "value": 1.0139
    //     }, 
    //     {
    //         "date": "2018-05-11", 
    //         "value": 1.0124
    //     }, 
    //     {
    //         "date": "2018-05-12", 
    //         "value": 1.0123
    //     }, 
    //     {
    //         "date": "2018-05-13", 
    //         "value": 1.0122
    //     }, 
    //     {
    //         "date": "2018-05-14", 
    //         "value": 1.0236
    //     }, 
    //     {
    //         "date": "2018-05-15", 
    //         "value": 1.0277
    //     }, 
    //     {
    //         "date": "2018-05-16", 
    //         "value": 1.02
    //     }, 
    //     {
    //         "date": "2018-05-17", 
    //         "value": 1.0196
    //     }, 
    //     {
    //         "date": "2018-05-18", 
    //         "value": 1.0202
    //     }, 
    //     {
    //         "date": "2018-05-19", 
    //         "value": 1.0201
    //     }, 
    //     {
    //         "date": "2018-05-20", 
    //         "value": 1.02
    //     }, 
    //     {
    //         "date": "2018-05-21", 
    //         "value": 1.0467
    //     }, 
    //     {
    //         "date": "2018-05-22", 
    //         "value": 1.0476
    //     }, 
    //     {
    //         "date": "2018-05-23", 
    //         "value": 1.0387
    //     }, 
    //     {
    //         "date": "2018-05-24", 
    //         "value": 1.0376
    //     }, 
    //     {
    //         "date": "2018-05-25", 
    //         "value": 1.0161
    //     }, 
    //     {
    //         "date": "2018-05-26", 
    //         "value": 1.016
    //     }, 
    //     {
    //         "date": "2018-05-27", 
    //         "value": 1.0159
    //     }, 
    //     {
    //         "date": "2018-05-28", 
    //         "value": 1.0322
    //     }, 
    //     {
    //         "date": "2018-05-29", 
    //         "value": 1.04
    //     }, 
    //     {
    //         "date": "2018-05-30", 
    //         "value": 1.0248
    //     }
    // ], 
    // "total": [
    //     {
    //         "date": "2018-05-01", 
    //         "value": 0.9796
    //     }, 
    //     {
    //         "date": "2018-05-02", 
    //         "value": 0.9787
    //     }, 
    //     {
    //         "date": "2018-05-03", 
    //         "value": 0.9819
    //     }, 
    //     {
    //         "date": "2018-05-04", 
    //         "value": 0.9776
    //     }, 
    //     {
    //         "date": "2018-05-05", 
    //         "value": 0.9775
    //     }, 
    //     {
    //         "date": "2018-05-06", 
    //         "value": 0.9773
    //     }, 
    //     {
    //         "date": "2018-05-07", 
    //         "value": 0.9835
    //     }, 
    //     {
    //         "date": "2018-05-08", 
    //         "value": 0.9909
    //     }, 
    //     {
    //         "date": "2018-05-09", 
    //         "value": 1.0112
    //     }, 
    //     {
    //         "date": "2018-05-10", 
    //         "value": 1.0139
    //     }, 
    //     {
    //         "date": "2018-05-11", 
    //         "value": 1.0124
    //     }, 
    //     {
    //         "date": "2018-05-12", 
    //         "value": 1.0123
    //     }, 
    //     {
    //         "date": "2018-05-13", 
    //         "value": 1.0122
    //     }, 
    //     {
    //         "date": "2018-05-14", 
    //         "value": 1.0236
    //     }, 
    //     {
    //         "date": "2018-05-15", 
    //         "value": 1.0277
    //     }, 
    //     {
    //         "date": "2018-05-16", 
    //         "value": 1.02
    //     }, 
    //     {
    //         "date": "2018-05-17", 
    //         "value": 1.0196
    //     }, 
    //     {
    //         "date": "2018-05-18", 
    //         "value": 1.0202
    //     }, 
    //     {
    //         "date": "2018-05-19", 
    //         "value": 1.0201
    //     }, 
    //     {
    //         "date": "2018-05-20", 
    //         "value": 1.02
    //     }, 
    //     {
    //         "date": "2018-05-21", 
    //         "value": 1.0467
    //     }, 
    //     {
    //         "date": "2018-05-22", 
    //         "value": 1.0476
    //     }, 
    //     {
    //         "date": "2018-05-23", 
    //         "value": 1.0387
    //     }, 
    //     {
    //         "date": "2018-05-24", 
    //         "value": 1.0376
    //     }, 
    //     {
    //         "date": "2018-05-25", 
    //         "value": 1.0161
    //     }, 
    //     {
    //         "date": "2018-05-26", 
    //         "value": 1.016
    //     }, 
    //     {
    //         "date": "2018-05-27", 
    //         "value": 1.0159
    //     }, 
    //     {
    //         "date": "2018-05-28", 
    //         "value": 1.0322
    //     }, 
    //     {
    //         "date": "2018-05-29", 
    //         "value": 1.04
    //     }, 
    //     {
    //         "date": "2018-05-30", 
    //         "value": 1.0248
    //     }
    // ]
  }
}

export default connect()(NetValueTrend)
